<template>
  <div class="formSearch">
    <div class="table-header" v-if="tableSearch && tableSearch.length > 0">
      <el-form
        size="small"
        :rules="rules"
        :model="formSearch"
        :inline="true"
        ref="formSearch"
        label-position="right"
        v-bind="{ 'label-width': '10%', ...(options && options.formProps) }"
      >
        <el-row :gutter="0">
          <template v-for="(item, index) in tableSearch">
            <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="4" :key="index">
              <el-form-item
                class="table-header-item"
                :label="item.label"
                :prop="item.value"
                :key="index"
                v-bind="item.labelProps"
              >
                <!-- 下拉 -->
                <el-select
                  clearable
                  v-bind="item.props"
                  v-if="item.type === 'select'"
                  v-model="formSearch[item.value]"
                  :placeholder="`请选择${item.placeholder || item.label}`"
                  @change="aaa"
                >
                  <el-option
                    v-for="option in item.children"
                    :key="option.value"
                    :value="option.value"
                    :label="option.label"
                  />
                </el-select>

                <!-- 日期 -->
                <el-date-picker
                  clearable
                  style="width: 100%"
                  placeholder="选择日期"
                  v-bind="item.props || { type: 'date' }"
                  v-else-if="item.type === 'picker'"
                  v-model="formSearch[item.value]"
                  unlink-panels
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                />
                <!-- 日期 -->
                <el-date-picker
                  v-if="item.type === 'pickerdate'"
                  v-model="formSearch[item.value]"
                  clearable
                  style="width: 100%"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
                <!-- 日期加时间 -->
                <el-date-picker
                  style="width: 100%"
                  v-if="item.type === 'pickertime'"
                  v-model="formSearch[item.value]"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  clearable
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
                <!-- 单个日期时间 -->
                <el-date-picker
                  style="width: 100%"
                  clearable
                  v-if="item.type === 'pickerone'"
                  v-model="formSearch[item.value]"
                  type="datetime"
                  placeholder="选择日期时间"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
                <!-- 级联-必须选择到最后一级 -->
                <el-cascader
                  v-if="item.type === 'cascader'"
                  v-model="formSearch[item.value]"
                  :options="item.options"
                  @change="handleChange"
                ></el-cascader>
                <!-- 级联-可以选择任意一级 -->
                <el-cascader
                  v-if="item.type === 'onecascader'"
                  v-model="formSearch[item.value]"
                  :options="item.children"
                  :props="item.props"
                  filterable
                  clearable
                >
                </el-cascader>
                <!-- 级联多选 -->
                <el-cascader
                  v-if="item.type === 'manycascader'"
                  v-model="formSearch[item.value]"
                  :options="item.children"
                  :props="{ multiple: true }"
                  clearable
                  filterable
                  collapse-tags
                >
                </el-cascader>
                <!--数字 -->
                <el-input
                  v-if="item.type === 'number'"
                  clearable
                  v-bind="item.props"
                  v-model="formSearch[item.value]"
                  :placeholder="`请输入${item.placeholder || item.label}`"
                  :maxlength="item.maxlength"
                  @keyup.enter.native="handleSearch"
                  :oninput="handleChangeInput(item)"
                />
                <!--文本-->
                <el-input
                  v-if="item.type === 'text'"
                  clearable
                  v-bind="item.props"
                  v-model="formSearch[item.value]"
                  :placeholder="`请输入${item.placeholder || item.label}`"
                  :maxlength="item.maxlength"
                  @keyup.enter.native="handleSearch"
                  :oninput="handleChangeInput(item)"
                />
                <!-- 姓名输入匹配 -->
                <el-autocomplete
                  v-if="item.type === 'auto'"
                  ref="el_auto"
                  class="inline-input"
                  style="width: 100%"
                  v-model="formSearch[item.value]"
                  :fetch-suggestions="querySearch"
                  :placeholder="`请输入${item.placeholder || item.label}`"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                >
                  <template v-if="noData" slot-scope="{ item }">
                    <div class="default">
                      {{ item.default }}
                    </div>
                  </template>
                </el-autocomplete>
                <!-- 编号输入匹配 -->
                <el-autocomplete
                  v-if="item.type === 'autoNo'"
                  class="inline-input"
                  style="width: 100%"
                  v-model="formSearch[item.value]"
                  :fetch-suggestions="querySearchNo"
                  :placeholder="`请输入${item.placeholder || item.label}`"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                >
                  <template v-if="noData1" slot-scope="{ item }">
                    <div class="default">
                      {{ item.default }}
                    </div>
                  </template>
                </el-autocomplete>
                <!--  申请额度范围 最低 -->
                <!-- <el-input
                  class="halfWidth"
                  v-if="item.apply === 'applyLow'"
                  clearable
                  v-bind="item.props"
                  :type="item.inputType || 'text'"
                  v-model="formSearch[item.value]"
                  :maxlength="item.maxlength"
                  @keyup.enter.native="handleSearch"
                  :oninput="handleChangeInput(item)"
                /> -->
                <!--  申请额度范围 最高 -->
                <!-- <el-input
                  class="halfWidth lvsige"
                  v-if="item.apply === 'applyHeight'"
                  clearable
                  v-bind="item.props"
                  :type="item.inputType || 'text'"
                  v-model="formSearch[item.value]"
                  :maxlength="item.maxlength"
                  @keyup.enter.native="handleSearch"
                  :oninput="handleChangeInput(item)"
                /> -->
              </el-form-item>
            </el-col>
          </template>

          <el-col class="btns">
            <el-button
              size="small"
              type="primary"
              _icon="el-icon-search"
              @click="handleSearch"
              class="wide-button lvsige"
            >
              查询
            </el-button>
            <el-button
              plain
              size="small"
              _icon="el-icon-refresh-right"
              @click="handleReset('formSearch')"
              class="wide-button"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { element } from "screenfull";
// import { convertParams } from "@/utils/tool";
const methods = {
  // 获取查询点击信息
  handleSelect(item) {
    console.log(item);
  },
  querySearch(queryString, cb) {
    this.$emit("queryString", queryString);
    this.newName = [];
    setTimeout(() => {
      if (this.newName.length > 0) {
        let newData = [];
        this.noData = false;
        for (let i = 0; i < this.newName.length; i++) {
          newData.push({
            label: this.newName[i],
            value: this.newName[i],
          });
        }
        var restaurants = newData;
        var results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      } else {
        let newData = [];
        for (let i = 0; i < this.newName.length; i++) {
          newData.push({
            label: this.newName[i],
            value: this.newName[i],
          });
        }
        var restaurants = newData;
        var results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;

        if (results.length === 0) {
          results = [{ default: "无匹配数据" }];
          this.noData = true;
        }
        cb(results);
      }
    }, 1000);
  },
  createFilter(queryString) {
    return (restaurant) => {
      // return false
      return restaurant.value.toLowerCase();
    };
  },
  querySearchNo(queryString, cb) {
    console.log(queryString);
    this.$emit("queryStringNo", queryString);
    this.newNo = [];

    setTimeout(() => {
      if (this.newNo.length > 0) {
        let newData = [];
        this.noData1 = false;
        for (let i = 0; i < this.newNo.length; i++) {
          newData.push({
            label: this.newNo[i],
            value: this.newNo[i],
          });
        }
        var restaurants = newData;
        var results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      } else {
        let newData = [];
        for (let i = 0; i < this.newNo.length; i++) {
          newData.push({
            label: this.newNo[i],
            value: this.newNo[i],
          });
        }
        var restaurants = newData;
        var results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;

        if (results.length === 0) {
          results = [{ default: "无匹配数据" }];
          this.noData1 = true;
        }
        cb(results);
      }
    }, 1000);
  },
  // 搜索查询按钮
  handleSearch() {
    // 处理为空时删除字段
    for (const key in this.formSearch) {
      if (Object.hasOwnProperty.call(this.formSearch, key)) {
        const element = this.formSearch[key];
        if (element === "") {
          delete this.formSearch[key];
        }
      }
    }
    this.$emit("handleSearch", this.formSearch);
  },
  // 搜索重置按钮
  handleReset(formName) {
    this.$refs[formName].resetFields();
    // this.$refs.cascader.clearCheckedNodes();
    this.formSearch = this.reset ? { ...this.value } : {};
    this.$emit("handleReset");
    if (this.reset) return false;
    this.handleSearch();
  },
  // input为number校验
  handleChangeInput(item) {
    return item.type === "number"
      ? this.handleOnInput(
          this.formSearch[item.value],
          item.value,
          item.rulesLength
        )
      : null;
  },
  aaa(e) {
    this.$emit("change", e);
  },
  // 级联选择
  handlePid(pid) {
    console.log(pid);
    // this.form.pid = pid[pid.length - 1];
  },
  // input渲染长度校验
  handleOnInput(val, label, rulesLength) {
    // console.log(val,label,rulesLength);
    // if (val && Number(val) <= 0) {
    //   this.formSearch[label] = 0;
    // }
    // if (rulesLength && val && val.length > 11) {
    //   this.formSearch[label] = this.formSearch[label].slice(0, 11);
    // }
  },
  // 层级数据
  handleChange(value) {
    console.log(value);
  },
};
export default {
  name: "FormSearch",
  props: {
    tableSearch: {
      type: Array,
    },
    rules: {
      type: Object,
    },
    value: {
      type: Object,
    },
    reset: {
      type: Boolean,
    },
    rulesLength: {
      type: Boolean,
    },
    options: Object,
    // restaurants: {
    //   type: Array,
    // },
    searchName: {
      type: Array,
    },
    searchNo: {
      type: Array,
    },
  },
  data() {
    return {
      noData: false,
      noData1: false,
      formSearch: {
        ...this.value,
      },
      w: 0,
      // 快捷日期
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      newName: [],
      newNo: [],
    };
  },
  mounted() {},
  methods,
  watch: {
    value(val) {
      if (val) return (this.formSearch = { ...this.value });
    },
    searchName(val) {
      console.log(val);
      if (val) {
        this.newName = val;
      }
    },
    searchNo(val) {
      if (val) {
        this.newNo = val;
      }
    },
  },
};
</script>
<style lang="less" scoped>
// /deep/.lvsige {
// margin-left: -65% !important;
//   // background-color: red;
// }
// /deep/.halfWidth {
//   // width: 47% !important;
//   background-color: red;
// }
// 头部容器
.table-header {
  /deep/ .el-form-item {
    display: flex;
    margin-bottom: 10px;
    .el-form-item__content {
      width: 70%;
      // margin-top: -10px;
      // min-width: 120px;
      // background-color: blue;
      .el-cascader {
        width: 100%;
      }
    }
    .el-select {
      width: 100%;
    }
    .el-form-item__label {
      width: 110px !important;
    }
  }
  // .table-item-btns-box {
  //   text-align: right;
  //   /deep/ .el-form-item__content {
  //     width: 100%;
  //     // min-width: 150px;
  //     text-align: right;
  //   }

  // }
  .btns {
    float: right;
    margin-bottom: 5px;
    width: 150px;
    // background-color: red;
    // margin-left: 80%;
    // margin-right: 50px;
  }
  /deep/.el-input--suffix .el-input__inner {
    padding-right: 0;
  }
}

</style>
